<template>
  <view class="payment-container">
    <!-- 商店信息卡片 -->
    <view class="store-profile">
      <view class="store-avatar">
        <image :src="shopInfo.logo" mode="aspectFill"></image>
        <view class="pulse-ring"></view>
      </view>
      <view class="store-info">
        <text class="store-name">{{shopInfo.name}}</text>
        <text class="store-status">营业中</text>
      </view>
    </view>
    
    <!-- 金额输入卡片 -->
    <view class="amount-card">
      <view class="amount-header">
        <text class="amount-title">付款金额</text>
        <view class="wallet-info" @tap="showWalletDetails">
          <u-icon name="account-fill" size="28" color="#FF4B4B"></u-icon>
          <text>金豆余额: ¥{{wallet.store_score || 0}}</text>
        </view>
      </view>
      
      <view class="amount-input-wrapper">
        <text class="currency-symbol">¥</text>
        <input 
          class="amount-input"
          :placeholder="placeholder" 
          type="digit" 
          @focus="handleFocus"
          @blur="handleBlur" 
          :value="number" 
          @input="onInput"
        />
      </view>
      
      <!-- 快速金额选择 -->
      <view class="quick-amounts">
        <view 
          v-for="amount in quickAmounts" 
          :key="amount"
          class="quick-amount-item"
          :class="{ active: number === amount.toString() }"
          @tap="selectAmount(amount)"
        >
          ¥{{amount}}
        </view>
      </view>
    </view>
    
    <!-- 支付方式选择 -->
    <!-- <view class="payment-methods">
      <view class="method-title">支付方式</view>
      <view class="method-item active">
        <view class="method-icon store-points">
          <u-icon name="star-fill" size="24" color="#FFFFFF"></u-icon>
        </view>
        <view class="method-info">
          <text class="method-name">金豆</text>
          <text class="method-desc">剩余: ¥{{wallet.store_score || 0}}</text>
        </view>
        <view class="method-selected">
          <u-icon name="checkmark" size="18" color="#FFFFFF"></u-icon>
        </view>
      </view>
    </view> -->
    
    <!-- 支付按钮和协议 -->
    <view class="payment-action">
      <view class="terms">
        <text>支付即表示您同意</text>
        <text class="terms-link">《支付服务条款》</text>
      </view>
      <button class="pay-button" :disabled="!isValidAmount" @tap="rechargeRights">
        <text>立即支付</text>
        <text v-if="number" class="button-amount">¥{{number}}</text>
      </button>
    </view>
    
    <!-- 浮动操作按钮 -->
    <view class="action-floating">
      <view class="action-btn help">
        <u-icon name="question-circle" size="24" color="#FFFFFF"></u-icon>
      </view>
      <view class="action-btn history">
        <u-icon name="order" size="24" color="#FFFFFF"></u-icon>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <loading-view v-if="showLoading"></loading-view>
  </view>
</template>

<script>
import { getWallet, storeScorePay } from '@/api/user';
import { getShopInfoByCode } from '@/api/shop';

export default {
  data() {
    return {
      number: '',
      placeholder: "输入金额",
      wallet: {},
      showLoading: false,
      code: "",
      shopInfo: "",
      quickAmounts: [10, 20, 50, 100],
      inputFocused: false
    };
  },
  
  computed: {
    isValidAmount() {
      return this.number && parseFloat(this.number) > 0;
    }
  },
  
  onLoad: function() {
    this.getWalletFun();
    const options = this.$Route.query;
    this.code = options.code;
    this.getShopInfoFun();
  },
  
  onUnload() {
    uni.$off('payment');
  },

  methods: {
    handleFocus() {
      this.inputFocused = true;
      this.placeholder = '';
    },
    
    handleBlur(event) {
      this.inputFocused = false;
      if (event.detail.value.length == 0) {
        this.placeholder = '输入金额';
      }
    },
    
    selectAmount(amount) {
      this.number = amount.toString();
    },
    
    showWalletDetails() {
      // 显示钱包详情
      uni.showToast({
        title: '查看钱包详情',
        icon: 'none'
      });
    },

    getWalletFun() {
      getWallet().then(res => {
        if (res.code == 1) {
          this.wallet = res.data;
        }
      });
    },
    
    getShopInfoFun() {
      getShopInfoByCode({code: this.code}).then(res => {
        if (res.code == 1) {
          this.shopInfo = res.data;
        }
      });
    },

    rechargeRights() {
      if (!this.isValidAmount) {
        return this.$toast({
          title: '请输入有效金额'
        });
      }
      
      this.showLoading = true;
      
      storeScorePay({
        money: Number(this.number),
        code: this.code
      }).then(({ code, data, msg }) => {
        if (code != 1) throw new Error(msg);

        uni.$on('payment', params => {
          setTimeout(() => {
            if (params.result) {
              this.$toast({ title: "支付成功" });
              this.$Router.replace({
                path: "/pages/pay_result/pay_result",
                query: {
                  id: params.order_id,
                  from: params.from,
                },
              });
            } else {
              this.$toast({ title: "支付失败" });
            }
          }, 500);
        });
        
        uni.navigateTo({
          url: `/pages/payment/payment?from=${'store'}&order_id=${data.id}`
        });
      }).catch(err => {
        console.log(err);
        this.$toast({ title: err.message || "支付请求失败" });
      }).finally(() => {
        this.showLoading = false;
      });
    },

    checkInputText(text) {
      var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g;
      if (reg.test(text)) {
        text = text.replace(reg, '$2$3$4');
      } else {
        text = '';
      }
      return text;
    },

    onInput(e) {
      let number = e.detail.value;
      number = this.checkInputText(number);
      this.number = number;
    }
  }
};
</script>

<style lang="scss">
.payment-container {
  min-height: 100vh;
  padding: 40rpx 30rpx;
  background: #f9fafc;
  position: relative;
  
  /* 商店信息卡片 */
  .store-profile {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    
    .store-avatar {
      position: relative;
      width: 120rpx;
      height: 120rpx;
      
      image {
        width: 100%;
        height: 100%;
        border-radius: 30rpx;
        object-fit: cover;
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
      }
      
      .pulse-ring {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        background: #4CD964;
        box-shadow: 0 0 0 rgba(76, 217, 100, 0.4);
        animation: pulse 2s infinite;
        
        &:after {
          content: '';
          position: absolute;
          top: 7rpx;
          left: 7rpx;
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          background: #ffffff;
        }
      }
    }
    
    .store-info {
      margin-left: 30rpx;
      
      .store-name {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .store-status {
        display: inline-block;
        font-size: 24rpx;
        color: #4CD964;
        background: rgba(76, 217, 100, 0.1);
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
      }
    }
  }
  
  /* 金额输入卡片 */
  .amount-card {
    background: #ffffff;
    border-radius: 30rpx;
    padding: 40rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.05);
    
    .amount-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      .amount-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
      
      .wallet-info {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #666;
        
        text {
          margin-left: 10rpx;
        }
      }
    }
    
    .amount-input-wrapper {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding-bottom: 20rpx;
      margin-bottom: 40rpx;
      
      .currency-symbol {
        font-size: 60rpx;
        font-weight: 500;
        color: #333;
      }
      
      .amount-input {
        flex: 1;
        height: 120rpx;
        font-size: 80rpx;
        font-weight: 500;
        color: #333;
        margin-left: 20rpx;
      }
    }
    
    .quick-amounts {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      
      .quick-amount-item {
        width: 22%;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f4f5f7;
        border-radius: 16rpx;
        color: #333;
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 20rpx;
        transition: all 0.3s;
        
        &.active {
          background: rgba(255, 75, 75, 0.1);
          color: #FF4B4B;
          font-weight: 600;
        }
        
        &:active {
          transform: scale(0.95);
        }
      }
    }
  }
  
  /* 支付方式 */
  .payment-methods {
    background: #ffffff;
    border-radius: 30rpx;
    padding: 40rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.05);
    
    .method-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 30rpx;
    }
    
    .method-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      
      &.active {
        .method-selected {
          opacity: 1;
        }
      }
      
      .method-icon {
        width: 60rpx;
        height: 60rpx;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.store-points {
          background: linear-gradient(135deg, #FF4B4B, #F95F2F);
        }
      }
      
      .method-info {
        flex: 1;
        margin-left: 20rpx;
        
        .method-name {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          display: block;
        }
        
        .method-desc {
          font-size: 24rpx;
          color: #999;
          display: block;
          margin-top: 4rpx;
        }
      }
      
      .method-selected {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        background: #FF4B4B;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.3s;
      }
    }
  }
  
  /* 支付按钮和协议 */
  .payment-action {
    margin-top: 60rpx;
    
    .terms {
      text-align: center;
      font-size: 24rpx;
      color: #999;
      margin-bottom: 30rpx;
      
      .terms-link {
        color: #FF4B4B;
      }
    }
    
    .pay-button {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #FF4B4B, #F95F2F);
      border-radius: 50rpx;
      color: white;
      font-size: 32rpx;
      font-weight: 600;
      box-shadow: 0 10rpx 30rpx rgba(255, 75, 75, 0.3);
      border: none;
      position: relative;
      overflow: hidden;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        animation: shine 3s infinite;
      }
      
      &:active {
        transform: scale(0.98);
      }
      
      &:disabled {
        background: #cccccc;
        box-shadow: none;
      }
      
      .button-amount {
        margin-left: 20rpx;
        font-weight: 500;
        background: rgba(255, 255, 255, 0.2);
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
        font-size: 28rpx;
      }
    }
  }
  
  /* 浮动操作按钮 */
  .action-floating {
    position: fixed;
    right: 40rpx;
    bottom: 160rpx;
    display: flex;
    flex-direction: column;
    
    .action-btn {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20rpx;
      box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
      
      &.help {
        background: #5E7CE0;
      }
      
      &.history {
        background: #FF4B4B;
      }
    }
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20rpx rgba(76, 217, 100, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0);
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
</style>